<template>
  <div class="big-box">
    <div class="swiper-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="nav">
        <ul class="nav-img">
          <li>
            <img src="http://localhost:8081/imgs/heart.png" alt />
            <p>签到</p>
          </li>
          <li>
            <img src="http://localhost:8081/imgs/bag.png" alt />
            <p>礼券</p>
          </li>
          <li>
            <img src="http://localhost:8081/imgs/cut.png" alt />
            <p>砍价</p>
          </li>
          <li>
            <img src="http://localhost:8081/imgs/light.png" alt />
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="cut-box">
      全名砍价
      <van-icon name="arrow" />
    </div>
    <!-- 全民砍价 -->
    <div class="all-cut">
      <div
        class="cut-goods"
        v-for="(item,index) in gooslist"
        :key="index"
        @click="goodsClick(item.id)"
      >
        <div class="goods-left">
          <img :src="item.pic" alt />
        </div>
        <div class="goods-right">
          <div>
            <div class="goods-title">{{item.name}}</div>
            <div class="goods-des">这是商品都很便宜</div>
          </div>
          <div class="goods-right-bottom">
            <div>
              <ul>
                <li>
                  ￥{{item.minPrice}}
                  <p>低价</p>
                </li>
                <li>
                  ￥{{item.originalPrice}}
                  <p>原件</p>
                </li>
                <li>
                  件{{item.numberOrders }}
                  <p>限量</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:70px;width:100%"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      gooslist: [],
    };
  },
  mounted() {
    this.$netClient
      .getStoreList({
        page: 1,
        pageSize: 20,
      })
      .then((response) => {
        // window.console.log(response.data.data);
        this.bannerList = response.data.data;
        // console.log()
      })
      .catch((error) => {
        window.console.log(error);
      }),
      this.$netClient
        .getGoodsList({
          params: {
            page: 1,
            pageSize: 10,
          },
        })
        .then((response) => { 
          window.console.log(response.data.data);
          this.gooslist = response.data.data;
          // console.log()
        })
        .catch((error) => {
          window.console.log(error);
         });
  },
  methods: {
    goodsClick(id) {
      this.$router.push({
        path: "/details",
        query:{
            id:id
        }
      });
    },
  },
};
</script>

<style scoped>
.big-box {
  background: #999;
}
.swiper-box {
  width: 100%;
}
.swiper-box img {
  width: 100%;
  height: 358px;
}
.nav {
  width: 100%;
  height: 115px;
  background: white;
  position: absolute;
  margin-top: -90px;
  border-radius: 45px 45px 0px 0px;
  z-index: 7;
}
.nav-img {
  display: flex;
  justify-content: space-around;
}
.nav-img ul li {
  width: 40px;
  list-style: none;
  align-items: center;
}
.nav-img li img {
  width: 40px;
  height: 40px;
}
.cut-box {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
.all-cut {
  width: 100%;
}
.cut-goods {
  width: 100%;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  display: flex;
  background: #fff;
  margin-top: 5px;
}
.goods-left {
  width: 40%;
  height: 130px;
  /* background: lightpink; */
  margin-left: 10px;
}
.goods-left img {
  width: 100%;
  height: 100%;
}
.goods-right {
  width: 56%;
  margin-left: 5px;
}
.goods-title {
  width: 100%;
  height: 25px;
  /* background: pink; */
}
.goods-des {
  width: 100%;
  height: 20px;
  margin-top: 3px;
  /* background: pink; */
}
.goods-right-bottom {
  width: 100%;
  height: 70px;
  /* border: 1px solid red; */
  margin-top: 10px;
}
.goods-right-bottom ul {
  display: flex;
  justify-content: space-around;
}
</style>